<template>
  <div class="flex flex-col w-full h-full">
    <div class="detailLogo flex flex-col justify-center">
      <img src="@/assets/imgs/detailLogo.png" alt="" class="w-250px h40px ml-50px" />
    </div>
    <div class="audio-detail flex w-1400px m-auto mt-10px justify-between">
      <div class="flex-1 mr-15px">
        <el-card>
          <div class="flex items-center">
            <audio :src="audioUrl" controls class="mt10px mb-10px w-50%"></audio>
            <div class="flex-1 ml-20px">
              <p class="lh-20px">毛泽东与中国共产党人的初心和使命</p>
              <div>
                <p class="m-0 font-size-15px lh-35px flex justify-between w-80%">
                  <span>来源：社会资源</span>
                  <span>出版社：解放军出版社</span>
                </p>
                <p class="m-0 font-size-15px lh-35px flex w-80%">
                  <span>关键字：战争、历史</span>
                  <span class="ml-95px">发布时间：2012-11</span>
                </p>
              </div>
              <el-button type="primary" size="small">下载申请</el-button>
              <el-button type="success" size="small">元数据详情</el-button>
            </div>
          </div>
          <el-tabs type="border-card" class="mt-10px">
            <el-tab-pane label="语音信息">语音信息</el-tab-pane>
            <el-tab-pane label="文本信息">文本信息</el-tab-pane>
          </el-tabs>
        </el-card>
        <el-card class="mt-10px">
          <title-container title="图书推荐"></title-container>
          <div class="bookRecommendations">
            <div class="b-books-box flex">
              <div class="b-books" v-for="(item, index) in bookRecommendations" :key="index">
                <img :src="item.imgPath" alt="" />
                <p>{{ item.text }}</p>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <el-card class="w-250px"> 
        <p class="mt-0"><span class="bot_border pb-10px font-size-15px">推荐音频</span></p>
        <ul class="w-100% p-0">
          <li class="flex items-center">
            <img :src="audio1" alt="" width="25px" height="25px" class="mr-10px">
            <div class="flex flex-col">
              <b class="font-size-14px">军事高科技名词手册1</b>
              <p class="flex font-size-13px">
                <span>时长：00:24:51</span>
                <span>大小：1264KB</span>
              </p>
            </div>
          </li>
          <li class="flex items-center">
            <img :src="audio1" alt="" width="25px" height="25px" class="mr-10px">
            <div class="flex flex-col">
              <b class="font-size-14px">军事高科技名词手册1</b>
              <p class="flex font-size-13px">
                <span>时长：00:24:51</span>
                <span>大小：1264KB</span>
              </p>
            </div>
          </li>
          <li class="flex items-center">
            <img :src="audio1" alt="" width="25px" height="25px" class="mr-10px">
            <div class="flex flex-col">
              <b class="font-size-14px">军事高科技名词手册1</b>
              <p class="flex font-size-13px">
                <span>时长：00:24:51</span>
                <span>大小：1264KB</span>
              </p>
            </div>
          </li>
          <li class="flex items-center">
            <img :src="audio1" alt="" width="25px" height="25px" class="mr-10px">
            <div class="flex flex-col">
              <b class="font-size-14px">军事高科技名词手册1</b>
              <p class="flex font-size-13px">
                <span>时长：00:24:51</span>
                <span>大小：1264KB</span>
              </p>
            </div>
          </li>
          <li class="flex items-center">
            <img :src="audio1" alt="" width="25px" height="25px" class="mr-10px">
            <div class="flex flex-col">
              <b class="font-size-14px">军事高科技名词手册1</b>
              <p class="flex font-size-13px">
                <span>时长：00:24:51</span>
                <span>大小：1264KB</span>
              </p>
            </div>
          </li>
        </ul>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import TitleContainer from '@/views/book/titleContainer.vue'
import { ref } from 'vue'
import image1 from '@/views/book/image/kgj.png'
import image2 from '@/views/book/image/szh.png'
import image3 from '@/views/book/image/zrjs.png'
import image4 from '@/views/book/image/kgj.png'
import audioUrl from '@/assets/imgs/xm2942.mp3'
import audio1 from '@/assets/imgs/audio1.png'

const bookRecommendations = ref([
  {
    imgPath: image1,
    text: '新时代强军文学作品选（2012-2022）·报告文学卷'
  },
  {
    imgPath: image2,
    text: '实战化的战略思维'
  },
  {
    imgPath: image3,
    text: '中日军事防务关系史'
  },
  {
    imgPath: image4,
    text: '站起来了——中华人民共和国开国纪事'
  }
])
</script>

<style lang="scss" scoped>
.detailLogo {
  width: 100%;
  height: 200px;
  background: url('@/assets/imgs/detailbg.png') no-repeat;
  background-size: 100% 100%;
}
.bookRecommendations {
  padding: 10px;
  box-sizing: border-box;

  .b-books-box {
    justify-content: space-around;

    .b-books {
      display: flex;
      width: 190px;
      flex-direction: column;
      align-items: center;

      img {
        width: 190px;
        height: 240px;
        margin-bottom: 10px;
      }

      p {
        font-size: 12px;
      }
    }
  }
}
.bot_border{
  border-bottom: 4px solid #299d63;
}
li{
  list-style: none;
}
</style>
